<template>
  <ZZDialog class="myself" title="实体属性" @close="onClose()">
    <div class="context">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="属性" width="150" />
        <el-table-column prop="value" label="值" width="180" />
      </el-table>
    </div>
  </ZZDialog>
</template>

<script>
import ZZDialog from '../common/ZZDialog.vue';

export default {
  components:{
    ZZDialog
  },
  data(){
    return{
      viewer: undefined,
      tableData: [],
    }
  },
  beforeMount(){
    this.viewer = this.$store.state.viewer
  },
  mounted(){
    this.viewer.zz.pickOper.setCallBack(this.showProperty);
    this.viewer.zz.pickOper.enable();
  },
  methods:{
    showProperty(obj, params) {
      this.tableData.length = 0;
      console.log(params);
      for (let key in obj) {
        if (key != "geometry" && !key.startsWith("_")) {
          this.tableData.push({
            name: key,
            value: obj[key]
          })
        }
      }
    },
    onClose(){
      this.viewer.zz.pickOper.cleanHighlight();
      this.viewer.zz.pickOper.setCallBack(undefined);
      this.viewer.zz.pickOper.disable();
      this.$emit('close') 
    }
  }
}

</script>

<style scoped>
.myself {
  position: absolute;
  left: 10px;
  top: 600px;
  min-width: 100px;
  height: auto;
}

.context {
  overflow-y: auto;
  height: 280px;
}
.el-table{
  color: white;
}
</style>


